<template>
  <div>
    <el-breadcrumb class="breadcrumb-row" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户资料</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div class="content-row">
        <h2>您当前的信息</h2>
        <el-form label-position="left" label-width="80px" :model="userinfo" size="small">
          <el-form-item label="ID">
            <el-input v-model="userinfo.id" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="userinfo.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="userinfo.nickname" disabled></el-input>
          </el-form-item>
          <el-form-item label="班级">
            <el-input v-model="userinfo.class" disabled></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-input :value="userinfo.status_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="身份">
            <el-input :value="userinfo.user_type_name" disabled></el-input>
          </el-form-item>
          <el-form-item label="注册时间">
            <el-input v-model="userinfo.create_time" disabled></el-input>
          </el-form-item>
          <el-form-item label="密码" class="pass-line-row">
            <el-button type="primary" @click="showUpdalog">修改密码</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import {findUserInfo, editUserpass} from "@/request";

export default {
  data() {
    var validatorPass = (rule, value, callback) => {
      if (value !== this.editParams.newpass) {
        callback(new Error("两次密码输入一样"));
        return;
      }
      callback();
    };
    return {
      editParams: {orlpass: "", newpass: "", yespass: ""},
      formrules: {
        orlpass: [{required: true, message: "请输入密码", trigger: "blur"}],
        newpass: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {
            min: 3,
            max: 12,
            message: "密码长度在3-12之间",
            trigger: "blur"
          }
        ],
        yespass: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {
            min: 3,
            max: 12,
            message: "密码长度在3-12之间",
            trigger: "blur"
          },
          {
            validator: validatorPass,
            trigger: "blur"
          }
        ]
      },
      userinfo: {},
      dialogFormVisible: false,
      upForm: {}
    };
  },
  created() {
    this.findUserinfo();
  },
  methods: {
    async findUserinfo() {
      const user = JSON.parse(window.sessionStorage.getItem("user"));
      this.userinfo = user ? user : {};
    },
    showUpdalog() {
      this.dialogFormVisible = true;
    },
  }
};
</script>

<style lang="scss" scoped>
.content-row {
  margin: 0 auto;
  max-width: 600px;
}

.pass-line-row {
  text-align: left;
}
</style>
